<template>
  <div class="feedback-page">
    <h2 class="section-title">反馈与建议</h2>
    <p class="section-description">您的意见对我们至关重要，帮助我们不断改进服务</p>
    
    <div class="feedback-container">
      <div class="feedback-form-container">
        <h3 class="form-title">提交您的反馈</h3>
        <form class="feedback-form" @submit.prevent="submitFeedback">
          <div class="form-group">
            <label for="feedback-type">反馈类型</label>
            <select id="feedback-type" v-model="feedbackForm.type" required>
              <option value="">请选择反馈类型</option>
              <option value="suggestion">产品建议</option>
              <option value="complaint">投诉</option>
              <option value="praise">表扬</option>
              <option value="other">其他</option>
            </select>
          </div>
          
          <div class="form-group">
            <label for="feedback-subject">主题</label>
            <input 
              type="text" 
              id="feedback-subject" 
              v-model="feedbackForm.subject" 
              placeholder="请简要描述您的反馈主题"
              required
            >
          </div>
          
          <div class="form-group">
            <label for="feedback-content">详细内容</label>
            <textarea 
              id="feedback-content" 
              v-model="feedbackForm.content" 
              placeholder="请详细描述您的反馈内容，以便我们更好地理解和处理"
              rows="6"
              required
            ></textarea>
          </div>
          
          <div class="form-group">
            <label for="feedback-contact">联系方式</label>
            <input 
              type="text" 
              id="feedback-contact" 
              v-model="feedbackForm.contact" 
              placeholder="请留下您的手机号或邮箱，方便我们回复"
            >
          </div>
          
          <div class="form-group">
            <label for="feedback-order">相关订单号 (如有)</label>
            <input 
              type="text" 
              id="feedback-order" 
              v-model="feedbackForm.orderNumber" 
              placeholder="如果反馈与特定订单相关，请填写订单号"
            >
          </div>
          
          <div class="form-group">
            <label>上传图片 (可选)</label>
            <div class="upload-area">
              <div class="upload-placeholder">
                <span class="upload-icon">+</span>
                <span class="upload-text">点击上传图片</span>
              </div>
            </div>
            <p class="upload-tip">支持jpg、png格式，最多上传3张图片</p>
          </div>
          
          <div class="form-group">
            <label class="checkbox-label">
              <input type="checkbox" v-model="feedbackForm.anonymous">
              <span>匿名提交</span>
            </label>
          </div>
          
          <button type="submit" class="btn-primary">提交反馈</button>
        </form>
      </div>
      
      <div class="contact-info">
        <h3 class="contact-title">其他联系方式</h3>
        <div class="contact-methods">
          <div class="contact-method">
            <div class="contact-icon">📞</div>
            <div class="contact-details">
              <h4>客服热线</h4>
              <p>400-123-4567</p>
              <p class="contact-note">周一至周日 9:00-20:00</p>
            </div>
          </div>
          
          <div class="contact-method">
            <div class="contact-icon">📧</div>
            <div class="contact-details">
              <h4>电子邮箱</h4>
              <p>feedback@huayang.com</p>
              <p class="contact-note">我们将在1-2个工作日内回复</p>
            </div>
          </div>
          
          <div class="contact-method">
            <div class="contact-icon">💬</div>
            <div class="contact-details">
              <h4>在线客服</h4>
              <button class="btn-outline">立即咨询</button>
              <p class="contact-note">在线时间: 9:00-22:00</p>
            </div>
          </div>
        </div>
        
        <div class="faq-section">
          <h3 class="faq-title">常见问题</h3>
          <ul class="faq-list">
            <li><a href="#">如何修改订单信息？</a></li>
            <li><a href="#">配送范围和时间是怎样的？</a></li>
            <li><a href="#">如何申请退款？</a></li>
            <li><a href="#">鲜花保鲜期是多久？</a></li>
            <li><a href="#">查看更多常见问题 →</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserFeedback',
  data() {
    return {
      feedbackForm: {
        type: '',
        subject: '',
        content: '',
        contact: '',
        orderNumber: '',
        anonymous: false
      }
    };
  },
  methods: {
    submitFeedback() {
      // 这里处理表单提交逻辑
      console.log('提交反馈', this.feedbackForm);
      alert('感谢您的反馈！我们会尽快处理并回复。');
      
      // 重置表单
      this.feedbackForm.type = '';
      this.feedbackForm.subject = '';
      this.feedbackForm.content = '';
      this.feedbackForm.contact = '';
      this.feedbackForm.orderNumber = '';
      this.feedbackForm.anonymous = false;
    }
  }
};
</script>

<style scoped>
.feedback-page {
  color: #333;
}

.section-title {
  color: #e75480;
  margin-bottom: 0.5rem;
}

.section-description {
  color: #666;
  margin-bottom: 2rem;
}

.feedback-container {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2rem;
}

.feedback-form-container {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-title {
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  color: #333;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: #555;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #e75480;
  outline: none;
}

.upload-area {
  border: 2px dashed #ddd;
  border-radius: 4px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

.upload-area:hover {
  border-color: #e75480;
  background-color: #f8f8f8;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-icon {
  font-size: 2rem;
  color: #ccc;
  margin-bottom: 0.5rem;
}

.upload-text {
  color: #888;
}

.upload-tip {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #888;
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-label input {
  margin-right: 0.5rem;
  width: auto;
}

.btn-primary {
  padding: 0.8rem 1.5rem;
  background-color: #e75480;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 1rem;
  width: 100%;
}

.btn-primary:hover {
  background-color: #d64d7b;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-title, .faq-title {
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  color: #333;
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-method {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.contact-icon {
  font-size: 2rem;
  color: #e75480;
}

.contact-details h4 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.contact-note {
  font-size: 0.85rem;
  color: #888;
  margin-top: 0.3rem;
}

.btn-outline {
  padding: 0.6rem 1.2rem;
  background: none;
  border: 1px solid #e75480;
  color: #e75480;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 0.5rem;
}

.btn-outline:hover {
  background-color: #f8e1e7;
}

.faq-section {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.faq-list {
  list-style: none;
  padding: 0;
}

.faq-list li {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.faq-list li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.faq-list a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s;
}

.faq-list a:hover {
  color: #e75480;
}

@media (max-width: 992px) {
  .feedback-container {
    grid-template-columns: 1fr;
  }
  
  .contact-info {
    order: -1;
  }
}

@media (max-width: 576px) {
  .feedback-form-container, .contact-method, .faq-section {
    padding: 1.5rem;
  }
}
</style>